<template>
    <ContentWrap>
        <!-- 搜索工作栏 - el-form加@submit.prevent是为了避免单个el-input回车时会刷新页面的问题 -->
        <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px" label-width="68px" @submit.prevent>
            <el-form-item label="姓名" prop="childName">
                <el-input v-model="queryParams.childName" class="!w-240px" clearable placeholder="请输入姓名" @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button @click="handleQuery">
                    <Icon class="mr-5px" icon="ep:search" />
                    搜索
                </el-button>
                <el-button @click="resetQuery">
                    <Icon class="mr-5px" icon="ep:refresh" />
                    重置
                </el-button>
                <el-button
                  plain
                  type="primary"
                  @click="openForm('create')"
                >
                  <Icon class="mr-5px" icon="ep:plus" />
                  新增
                </el-button>
            </el-form-item>
        </el-form>
    </ContentWrap>
    <!-- 列表 -->
    <ContentWrap>
        <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column align="center" label="用户编号" prop="id" width="120px" />
            <el-table-column align="center" label="头像" prop="avatar" width="80px">
                <template #default="scope">
                    <img :src="scope.row.avatar" style="width: 40px" />
                </template>
            </el-table-column>
            <el-table-column align="center" label="姓名" prop="childName" />
            <el-table-column align="center" label="性别" prop="childSex">
                <template #default="scope">
                    <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.childSex" />
                </template>
            </el-table-column>
            <el-table-column :formatter="dateFormatter2" align="center" label="生日" prop="birthday" width="180px" />
            <el-table-column :show-overflow-tooltip="false" align="center" label="血缘关系" prop="relationship">
                <template #default="scope">
                    <dict-tag :type="DICT_TYPE.RELATIONSHIP" :value="scope.row.relationship" />
                </template>
            </el-table-column>
            <el-table-column align="center" label="备注" prop="remark" />
            <el-table-column :show-overflow-tooltip="false" align="center" fixed="right" label="操作" width="160px">
                <template #default="scope">
                    <div class="flex items-center justify-center">
                        <el-button link type="primary" @click="openDetail(scope.row.id)">详情</el-button>
                        <el-button link type="primary" @click="handleUpdate(scope.row.id)">编辑</el-button>
                        <el-button link type="primary" @click="openForm1('create', scope.row.id)">新增身高</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total" @pagination="getList" />
    </ContentWrap>
    <!-- 表单弹窗：添加/修改 -->
    <ChildForm ref="formRef" @success="getList" />
    <ChildFormHeight ref="heightRef" @success="getList" />
</template>
<script lang="ts" setup>
import { dateFormatter2 } from '@/utils/formatTime'
import * as ChildApi from '@/api/member/child'
import { DICT_TYPE } from '@/utils/dict'
import ChildForm from './ChildForm.vue'
import ChildFormHeight from './ChildFormHeight.vue'
import { checkPermi } from '@/utils/permission'

defineOptions({ name: 'MemberChild' })
const { push, currentRoute } = useRouter()
const message = useMessage() // 消息弹窗

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    parentId: currentRoute.value.params.id,
    childName: null
})
const queryFormRef = ref() // 搜索的表单
const selectedIds = ref < number[] > ([]) // 表格的选中 ID 数组

/** 查询列表 */
const getList = async () => {
    loading.value = true
    try {
        const data = await ChildApi.getChildPage(queryParams)
        list.value = data
        // total.value = data.total
    } finally {
        loading.value = false
    }
}

/** 搜索按钮操作 */
const handleQuery = (event) => {
    event?.preventDefault();
    queryParams.pageNo = 1
    getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
}

/** 打开会员详情 */
const openDetail = (id: number) => {
    push({ name: 'MemberUserChildDetail', params: { id } })
}

/** 添加/修改操作 */
const formRef = ref()
const heightRef = ref()
const openForm = (type: string, id?: number) => {
    formRef.value.open(type, id)
}
const openForm1 = (type: string, id?: number) => {
    heightRef.value.open(type, id)
}

/** 修改 */
const handleUpdate = (id: number) => {
    openForm('update', id)
}

/** 表格选中事件 */
const handleSelectionChange = (rows: ChildApi.ChildVO[]) => {
    selectedIds.value = rows.map((row) => row.id)
}

/** 操作分发 */
const handleCommand = (command: string, row: ChildApi.ChildVO) => {
    switch (command) {
        case 'handleUpdate':
            openForm('update', row.id)
            break
        default:
            break
    }
}

/** 初始化 **/
onMounted(() => {
    getList()
})

</script>
